<!DOCTYPE html>
<html dir="ltr">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" type="image/png" sizes="16x16" href="static/images/favicon.png">
    <title>用户登录</title>
    <link href="static/app-libs/css/style.min.css" rel="stylesheet">
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <div class="main-wrapper">
        <div class="preloader">
            <div class="lds-ripple">
                <div class="lds-pos"></div>
                <div class="lds-pos"></div>
            </div>
        </div>
        <div class="auth-wrapper d-flex no-block justify-content-center align-items-center" style="background:url(static/images/big/auth-bg.jpg) no-repeat center center;">
            <div class="auth-box">
                <div id="loginform">
                    <div class="logo">
                        <span class="db"><img src="static/images/logo-icon.png" alt="logo" style="width:32px; height:32px" /></span>
                        <h5 class="font-medium m-b-20">用户登录</h5>
                    </div>
                    <div class="row">
                        <div class="col-12">
                            <form class="form-horizontal m-t-20" id="login-form" onsubmit="return false;">
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon1"><i class="ti-user"></i></span>
                                    </div>
                                    <input type="text" class="form-control form-control-lg" placeholder="用户名" aria-label="username" name="username" id="username" aria-describedby="basic-addon1">
                                </div>
                                <div class="input-group mb-3">
                                    <div class="input-group-prepend">
                                        <span class="input-group-text" id="basic-addon2"><i class="ti-pencil"></i></span>
                                    </div>
                                    <input type="password" class="form-control form-control-lg" placeholder="密码" aria-label="password" name="password" id="password" aria-describedby="basic-addon1">
                                </div>
                            
                                <div class="form-group text-center">
                                    <div class="col-xs-12 p-b-20">
                                        <button class="btn btn-block btn-lg btn-info" type="submit" onclick="login(this)">登录</button>
                                    </div>
                                    <span id="info" style="color: red"></span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
    <script src="static/libs/jquery/dist/jquery.min.js"></script>
    <script src="static/libs/popper.js/dist/umd/popper.min.js"></script>
    <script src="static/libs/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="static/app-libs/js/constant.js"></script>
    <script src="static/app-libs/js/common.js"></script>
    <script type="text/javascript">
        $(".preloader").fadeOut();
    </script>
</body>
<script type="text/javascript">
    var access_token = localStorage.getItem("access_token");
    if (access_token != null && access_token.trim().length != 0) {
        $.ajax({
            type : 'get',
            url : domainName + '/users/current?access_token=' + access_token,
            success : function(data) {
                location.href = 'index.html';
            },
            error : function(xhr, textStatus, errorThrown) {
                if (xhr.status == 401) {
                    localStorage.removeItem("access_token");
                }
            }
        });
    }

    function login(obj) {
        $(obj).attr("disabled", true);

        var username = $.trim($('#username').val());
        var password = $.trim($('#password').val());
        if (username == "" || password == "") {
            $("#info").html('用户名或者密码不能为空');
            $(obj).attr("disabled", false);
        } else {
            $.ajax({
                type : 'post',
                url : domainName + '/sys/login',
                timeout : 5000, //超时时间设置，单位毫秒
                data : $("#login-form").serialize(),
                success : function(data) {
                    //将access_token和refresh_token写入本地
                    localStorage.setItem("access_token", data.access_token);
                    localStorage.setItem("refresh_token", data.refresh_token);
                    location.href = 'index.html';
                },
                error : function(xhr, textStatus, errorThrown) {
                    $(obj).attr("disabled", false);
                    if(textStatus == 'timeout') {
                        $("#info").html("登陆超时,请重试");
                        return;
                    }
                    var msg = xhr.responseText;
                    if(msg == undefined){
                        $("#info").html("请重试");
                    } else {
                        var response = JSON.parse(msg);
                        var message = response.error_description;
                        if(message == undefined){
                            message = response.message;
                        }
                        $("#info").html(message);
                    }
                }
            });

        }
    }
</script>
</html>